
<template>

  <div>
    <div class="pageContent">
        <div class="numberBox">
    <div class="distributor line_box" >
        <div class="distributorNum" @click="linkTo('/shops')">{{general.shop_num}}</div>
        <div  class="distributorApply" @click="linkTo('/shops/applyList')">
          <span>{{general.applies_shop_num}}</span>人申请
        </div>
        <span class="textTitle" >店铺</span>
    </div>
    <div class="followCustomer" @click="linkTo('/customs')">{{general.living_threads_num}}<span class="textTitle">跟进中的客户</span></div>
    <div class="cargos small_content" @click="linkTo('/supplies')">{{general.supplies_num}}<span class="textTitle">货源</span></div>


    <!-- <div class="distributor bg-green">
        <div class="distributorNum" @click="linkTo()">{{general.staff_times}}</div>
        <div  class="distributorApply" @click="linkTo()">
          <span>{{general.applies_staff_number}}</span>人申请
        </div>
        <span class="textTitle" @click="linkTo()">销售额</span>
    </div> -->

    <div class="followCustomer bg-pink" @click="linkTo('/threads')">{{general.sure_threads_num}}<span class="textTitle"   >可分配线索</span></div>
  </div>
      <!-- <div class="numberBox">
        <div class="followCustomer" @click="toProlList()">{{general.applies_shop_number}}{{general.applies_staff_number}}
          <span class="textTitle">待审方案</span></div>
        <div class="cargos">{{general.source_shops_num}}<span class="textTitle">货源</span></div>
        <div class="followCustomer bg-green">{{general.track_order_num}}{{general.living_threads_times}}<span class="textTitle">可分配线索</span></div>
      </div> -->
      <div class="dealForm">
        <!-- <div class="dealInfo">
              <p><span class="dealText">昨日成交额</span><span class="dealMoeny">3700，00</span></p>
              <p><span class="dealText">昨日成交订单</span> <span class="dealOrder">47</span></p>
        </div> -->
        <div id="myChart" :style="{width: '1120px', height: '356px'}"></div>
      </div>
      <div class="channelForm">
        <!-- <p>渠道业绩</p> -->
        <div class="channelFormContent">
          <div id="myCharts" :style="{width: '256px', height: '370px'}"></div>
        </div>
      </div>
      <div class="listBox">
        <div class="listNav">
          <div :class="{selected : selectedTable==1}"  @click="tableCount(1)">昨天</div>
          <div :class="{selected : selectedTable==2}" @click="tableCount(2)">近一周</div>
          <div :class="{selected : selectedTable==3}" @click="tableCount(3)">近一月</div>
        </div>
        <template>
          <el-table
            :data="shopsCount"
            border
            stripe
            style="width: 100%">
            <el-table-column
      type="index"
      width="50">
    </el-table-column>
            <el-table-column
              prop="shop_name"
              label="店铺">
            </el-table-column>
            <el-table-column
              prop="sales_times"
              label="店员">
            </el-table-column>
            <el-table-column
              prop="living_threads_times"
              label="跟进线索">
            </el-table-column>
            <el-table-column
              prop=""
              label="成交订单">
            </el-table-column>
            <el-table-column
              prop="turnover_sum"
              label="成交额">
            </el-table-column>
            <el-table-column
              prop="return_threads_times"
              label="返还线索">
            </el-table-column>
            <el-table-column
              prop="goods_supplies_times"
              label="货源">
            </el-table-column>
          </el-table>

        </template>


      </div>


    </div>
  </div>

</template>

<script>
import Vue from "vue";
import * as Models from "@/api/dashbord";

export default {
  data() {
    return {
      tableData: [
        {
          num: 1,
          channel: "昆明名车汇",
          sale: "36",
          clue: "108",
          yesterdayDeal: "41",
          yesterdayMoney: "35000",
          yesterdayBack: "224",
          cargos: "224"
        },
        {
          num: 2,
          channel: "昆明名车汇",
          sale: "36",
          clue: "108",
          yesterdayDeal: "41",
          yesterdayMoney: "35000",
          yesterdayBack: "224",
          cargos: "224"
        },
        {
          num: 3,
          channel: "昆明名车汇",
          sale: "36",
          clue: "108",
          yesterdayDeal: "41",
          yesterdayMoney: "35000",
          yesterdayBack: "224",
          cargos: "224"
        },
        {
          num: 4,
          channel: "昆明名车汇",
          sale: "36",
          clue: "108",
          yesterdayDeal: "41",
          yesterdayMoney: "35000",
          yesterdayBack: "224",
          cargos: "224"
        }
      ],

      userName: sessionStorage.description,
      totals: {},
      channel_list: {},
      sale_adviser_list: {},
      total_number: 0, //渠道商总个数
      request_number: 0, //渠道商申请个数
      customer: 0, //跟进客户
      clue: 0, //可跟进线索
      supply_goods: 0, //货源
      baseDataUrl: "dream/Operate_Basics/getBasicsConutList",
      baseData: "",
      general: "",
      lineData: "",
      shopsCount: [],
      selectedTable:1,
    };
  },

  mounted() {
    
    this.query();
    this.line();
    this.roung();
    this.tableCount(1);
  },

  methods: {
    query: function(config) {
      let that = this;
      if (config && config.reload) {
        that.reset();
      }
      Models.get({})
        .then(function(data) {
          console.log(data);
          that.general = data;
        })
        .catch(function(err) {
          // console.warn(err);
        });
    },
    line: function(config) {
      let that = this;
      if (config && config.reload) {
        that.reset();
      }
      Models.line({})
        .then(function(data) {
          console.log(data);
          that.lineData = data;

          that.drawLine(data.data);
        })
        .catch(function(err) {
          // console.warn(err);
        });
    },
    roung: function() {
      let that = this;

      Models.shops_pie({})
        .then(function(data) {
          console.log(data);

          that.drawRoung(data.data);
        })
        .catch(function(err) {
          // console.warn(err);
        });
    },
    tableCount: function(type) {
      let that = this;
      this.selectedTable=type

      Models.shops_count({time_type:type})
        .then(function(data) {
          console.log(data);
          that.shopsCount = data.data;
        })
        .catch(function(err) {
          // console.warn(err);
        });
    },
    drawLine(lineData) {
      console.log(lineData);
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data:['成交量','成交总额']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: lineData.date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "成交量",
            type: "line",
            stack: "成交量",
            areaStyle: {normal: {}},
            data: lineData.deal_order
          },
          {
            name: "成交总额",
            type: "line",
            stack: "成交总额",
            areaStyle: {normal: {}},
            data: lineData.deal_price
          }
        ]
      });
    },
    drawRoung(roungData) {
      // 基于准备好的dom，初始化echarts实例
      let datas = [];
      let legendData=[];
      for (let i = 0; i < roungData.length; i++) {
        let data = {
          name: roungData[i].shop_name,
          value: roungData[i].value
        };
        legendData.push(roungData[i].shop_name)
        datas.push(data);
      }
      let myChart = this.$echarts.init(document.getElementById("myCharts"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "合作商业绩",
          subtext: "贡献比",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          data: legendData,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "40%"],
            data: datas,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    linkTo(route){
      this.$router.push({ path: route })
    },
  }
};
</script>


<style scoped>
body {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  font-family: "MicrosoftYaHei ";
  background-color: #edeef0;
}

.pageContent {
  width: 1120px;
  height: 100%;
  margin: 0 auto;
  color: #ffffff;
}
.listBox {
  width: 815px;
  margin-left: 20px;
  display: inline-block;
  float: right;
}
.listBox .listNav {
  float: right;
  width: 297px;
  border: 1px solid #dedede;
  border-right: none;
  margin-bottom: 10px;
}
.listBox .listNav div {
  float: left;
  background-color: #ffffff;
  border-right: 1px solid #dedede;
  width: 98px;
  height: 32px;
  line-height: 32px;
  color: #595959;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.listBox .listNav .selected {
  background-color: #ef702e;
  color: #ffffff;
}
.channelFormContent {
  height: 370px;
  width: 285px;
  background-color: #ffffff;
}
.channelForm {
  height: 410px;
  width: 285px;
  display: inline-block;
}
.channelForm p {
  height: 40px;
  font-size: 20px;
  font-weight: bold;
  color: rgba(45, 45, 45, 1);
  margin: 0;
}
.dealForm {
  height: 356px;
  width: 1120px;
  margin-bottom: 42px;
  position: relative;
  color: black;
}
.dealText {
  display: inline-block;
  width: 100px;
}
.dealOrder {
  color: #f56c59;
  font-weight: bold;
  font-size: 1.5rem;
  display: inline-block;
  margin-left: 10px;
}
.dealMoeny {
  font-size: 1.5rem;
  display: inline-block;
  margin-left: 10px;
  color: #52a6ea;
  font-weight: bold;
}
.dealInfo {
  position: absolute;
  top: 0;
  left: 10px;
}
.numberBox {
  height: 350px;
  width: 100%;
}
.numberBox div {
  cursor: pointer;
}
.cargos {
  height: 310px;
  width: 550px;
  line-height: 310px;
  text-align: center;
  font-size: 40px;
  display: inline-block;
  float: right;
  background-color: #6b41b6;
  margin: 20px 0 20px 0;
  position: relative;
}
.bg-pink {
  background-color: #e4715c !important;
}
.bg-green {
  background-color: #4aa361 !important;
}
.followCustomer {
  width: 245px;
  height: 95px;
  font-weight: bold;
  font-size: 40px;
  padding-top: 50px;
  text-align: center;
  position: relative;
  display: inline-block;
  float: left;
  background-color: #56beea;
  margin: 20px 20px 0 0;
  line-height: 30px;
}
.distributor {
  background-color: #56beea;
  height: 310px;
  width: 570px;
  display: inline-block;
  position: relative;
  margin: 20px 20px 0 0;
  float: left;
}
.distributorNum {
  height: 310px;
  line-height: 310px;
  width: 392px;
  font-size: 40px;
  font-weight: bold;
  display: inline-block;
  float: left;
  text-align: center;
  border-right: 1px dashed #dedede;
}
.textTitle {
  font-size: 16px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-weight: normal;
  position: absolute;
  height: 25px;
  line-height: 30px;
}
.distributorApply {
  display: inline-block;
  width: 177px;
  font-size: 16px;
  padding-top: 28px;
  text-align: center;
  float: left;
  line-height: 310px;
}
.distributorApply span {
  font-size: 25px;
}
.small_content{
  width: 265px;
}
.line_box{
  height: 310px;
}
</style>


